<template>
 <view class="signature">
   <canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
   <view class="footer">
     <view class="right" @click="clear">{{ $t('order_sign.clear') }}</view>
     <view class="left" @click="signDone">{{ $t('order_sign.done') }}</view>
   </view>
 </view>
</template>

<script>
export default {
  onLoad() {
    this.createCanvas();
  },
  data() {
    return {
      ctx: '',
      points: [],
      signImage: ''
    }
  },
  methods: {
    createCanvas() {
      this.ctx = uni.createCanvasContext('mycanvas', this);
      this.ctx.lineWidth = 4;
      this.ctx.lineCap = 'round';
      this.ctx.lineJoin = 'round';
    },
    touchstart(e) {
      document.body && (document.body.style.overflow = 'hidden');
      let startX = e.changedTouches[0].x;
      let startY = e.changedTouches[0].y;
      let startPoint = { X: startX, Y: startY };
      this.points.push(startPoint);
      this.ctx.beginPath();
    },
    touchmove(e) {
      let moveX = e.changedTouches[0].x;
      let moveY = e.changedTouches[0].y;
      let movePoint = { X: moveX, Y: moveY };
      this.points.push(movePoint);
      let len = this.points.length;
      if (len >= 2) {
        this.draw();
      }
    },
    touchend() {
      document.body && (document.body.style.overflow = '');
      this.points = [];
      this.finish();
    },
    draw() {
      let point1 = this.points[0];
      let point2 = this.points[1];
      this.points.shift();
      this.ctx.moveTo(point1.X, point1.Y);
      this.ctx.lineTo(point2.X, point2.Y);
      this.ctx.stroke();
      this.ctx.draw(true);
    },
    clear() {
      let that = this;
      uni.getSystemInfo({
        success: function (res) {
          let canvasw = res.windowWidth;
          let canvash = res.windowHeight;
          that.ctx.clearRect(0, 0, canvasw, canvash);
          that.ctx.draw(true);
          that.finish();
        },
      })
    },
    finish() {
      let that = this;
      uni.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
          that.signImage = res.tempFilePath;
        }
      })
    },
    signDone() {
      let that = this;
      uni.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
          // 用 eventChannel 回传
          const eventChannel = that.getOpenerEventChannel();
          eventChannel.emit('signImage', res.tempFilePath);
          uni.navigateBack();
        }
      })
    }
  }
}
</script>

<style scoped>
.signature {
  position: fixed;
  top: 10px;
  left: 2%;
  z-index: 999;
  width: 96%;
  touch-action: none;
}
.mycanvas {
  width: 100%;
  height: 60vh;
  background-color: #ECECEC;
}
.footer {
  font-size: 14px;
  height: 80px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.left, .right {
  line-height: 40px;
  height: 40px;
  width: 100px;
  text-align: center;
  font-weight: bold;
  color: white;
  background: #007AFF;
  border-radius: 8px;
  opacity: 0.85;
}
</style> 